<!-- 员工管理 -->
<template>
    <div>
        <el-form :inline="true" :model="ruleForm" class="demo-form-inline">
            <el-form-item label="姓名：">
                <el-input placeholder="请输入姓名" v-model.trim="ruleForm.name" maxlength="20" size="small"></el-input>
            </el-form-item>
            <el-form-item label="岗位：" prop="post">
                <el-select v-model="ruleForm.post" filterable style="width: 200px;" size="small">
                    <el-option v-for="item in postlist"
                               :key="item.id"
                               :label="item.label"
                               :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="部门：" prop="depart">
                <el-select v-model="ruleForm.depart" filterable style="width: 200px;" size="small">
                    <el-option v-for="item in departlist"
                               :key="item.id"
                               :label="item.label"
                               :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="success"  @click="searchList" id="monitorEnter" size="small">查询</el-button>
                <el-button type="primary" @click="newbuilt" size="small">新建</el-button>
                <el-button size="small" type="primary" @click="downExcelHandle">下载导入模版</el-button>
                <a :href="downUrl" ref="downNode" target="_blank"></a>
                <el-button size="small" type="primary" @click="upLoadHandle">批量导入</el-button>
                <input type="file" ref="upLoad" style="display: none;" @change="fileChangeHandle">
            </el-form-item>
        </el-form>
        <el-table :data="tableData" border>
            <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
            <el-table-column label="区域" prop="regionName" width="80" align="center"></el-table-column>
            <el-table-column label="城市" width="70" prop="cityName" align="center"></el-table-column>
            <el-table-column label="工号" width="90" prop="staffCode" align="center"></el-table-column>
            <el-table-column label="姓名" width="70" prop="staffName" align="center"></el-table-column>
            <el-table-column label="EHR岗位" width="100" prop="ehrJobName" align="center">
                <template slot-scope="scope">
                    <span>{{scope.row.ehrJobName?scope.row.ehrJobName:'——'}}</span>
                </template>
            </el-table-column>
            <el-table-column label="岗位" prop="stationName" align="center"></el-table-column>
            <el-table-column label="业务线" prop="businessLineName" align="center"></el-table-column>
            <el-table-column label="EHR中心/项目" prop="ehrOrgName" align="center">
                <template slot-scope="scope">
                    <span>{{scope.row.ehrOrgName?scope.row.ehrOrgName:'——'}}</span>
                </template>
            </el-table-column>
            <el-table-column label="部门" prop="departmentName" align="center"></el-table-column>
            <el-table-column label="角色" prop="roleName" align="center"></el-table-column>
            <el-table-column label="片区" prop="sliceAreaName" align="center">
                <template slot-scope="scope">
                    <span>{{scope.row.sliceAreaName?scope.row.sliceAreaName:'——'}}</span>
                </template>
            </el-table-column>
            <el-table-column label="入职日期"  width="100" prop="hiredate" align="center">
                <template slot-scope="scope">
                    {{formatDate(scope.row.hiredate)}}
                </template>
            </el-table-column>
            <el-table-column label="离职时间"  width="100" prop="leavedate" align="center">
                <template slot-scope="scope">
                    {{scope.row.leavedate ? formatDate(scope.row.leavedate) : "——"}}
                </template>
            </el-table-column>
            <el-table-column label="分佣楼盘" prop="projectSettingList" width="150" align="center">
                <template slot-scope="scope">
                    <div class="pstyle" v-if="scope.row.projectSettingList.length==0" @click="btnhander(scope.row)">
                      ——
                    </div>
                    <div class="pstyle" v-else  v-for="(item,index) in scope.row.projectSettingList" @click="btnhander(scope.row)"> 
                        <p class="pstyle" v-if="index<3">{{item.devName}}</p>
                    </div>
                    <div class="pstyle" v-if="scope.row.projectSettingList.length>3">
                        ...
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="详细信息" width="80" prop="city" align="center">
                <template slot-scope="scope">
                    <el-button type="text" @click="editbuilt('edit',scope.row)">编辑</el-button>
                </template>
            </el-table-column>
            <el-table-column label="设定片区负责人"  align="center">
                <template slot-scope="scope">
                    <p v-if="scope.row.regionId">
                        <el-button  type="text"  @click="areahander('edit',scope.row)">编辑片区</el-button>
                        <el-button  type="text"  @click="unbindhander('unbind',scope.row)">解绑</el-button>
                    </p>
                    <el-button v-else type="text" @click="areahander('bind',scope.row)">绑定片区</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagebar">
            <el-pagination
                    background
                    layout="total, sizes, prev, pager, next"
                    :current-page.sync="ruleForm.pageNum"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="ruleForm.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :total="totalSize">
            </el-pagination>
        </div>

        <el-dialog title='' :visible.sync="dialogFormVisible" width="35%">
            <div style="margin-left: 40px">
                <h3>分佣楼盘：</h3>
                <div v-for="(item,index) in proSetting">
                    <el-button class="nopad" type="text" @click="setonedev(item)">{{item.devName}}</el-button>
                </div>
                <p>添加楼盘:</p>
                <el-select v-model="devname" filterable style="width: 200px;">
                    <el-option
                            v-for="item in devlist"
                            :key="item.id"
                            :label="item.devName"
                            :value="item.id">
                    </el-option>
                </el-select>
                <div style="margin-top: 20px">
                    <el-button type="primary" @click="setcommissin">前往进行分佣设置</el-button>
                </div>
            </div>
        </el-dialog>
        <el-dialog :title="areatype=='bind'? '绑定片区':'编辑片区'" :visible.sync="dialogFormVisible2" width="500px">
            <div style="margin-left: 40px">
                <el-form :model="form">
                    <p >
                        <span style="margin-left: 20px">{{currentArea.staffName}}</span>
                        <span style="margin-left: 20px">{{currentArea.staffCode}}</span>
                        <span style="margin-left: 20px">{{currentArea.departmentName}}</span>
                    </p>
                    <el-form-item label="选择区域：" required>
                        <el-select v-model="form.region" filterable style="width: 230px;" @change="selectregion">
                            <el-option v-for="item in regionlist"
                                       :key="item.id"
                                       :label="item.name"
                                       :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="选择片区：" required>
                        <el-select v-model="form.area" filterable style="width: 230px;">
                            <el-option v-for="item in arealist"
                                       :key="item.id"
                                       :label="item.name"
                                       :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="text-align: center">
                        <el-button type="primary" @click="areaEnsure">确定</el-button>
                        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                    </el-form-item>
                </el-form>      
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import api from '@/api/apiPath'
    import TimeComp from '../../common/timeComp'

    export default {
        title: '员工管理',
        components: {TimeComp},
        data() {
            return {
                dialogFormVisible: false,
                dialogFormVisible2: false,
                areatype:'bind',//片区类型
                currentArea:{},//当前修改的item
                formLabelWidth: '120px',
                ruleForm: {
                    name: "",
                    post: "",
                    depart: "",
                    pageNum: 1,
                    pageSize: 10,
                },
                form:{
                    region:'',
                    area:'',
                },
                regionlist:[],
                arealist:[],
                devname:'',
                totalSize: 0,
                postlist: [],
                departlist: [],
                tableData: [],
                proSetting:[],
                devlist: [],
                downUrl:api.STAFFDOWNLOAD,
            }
        },
        methods: {
            selectregion(){
                this.form.area = ''
                this.selectslicearea()
            },
             //根据区域查询片区信息
            selectslicearea(){
                this.axios.post(api.SELECTSLICEAREA,{areaId:this.form.region}).then(res=>{
                     if (res.data.code == 200) {
                        this.arealist = res.data.data
                     }
                })
            },
            areaEnsure(){
                if (this.form.region == '') {
                    this.$message({
                        message:'请选择区域',
                        type:'warning'
                    })
                    return
                }
                if (this.form.area == '') {
                    this.$message({
                        message:'请选择片区',
                        type:'warning'
                    })
                    return
                }
                this.axios.post(api.ADDSLICEAREA,{id:this.currentArea.id,sliceAreaId:this.form.area}).then(res=>{
                    if (res.data.code == 200) {
                        this.$message({
                            message:res.data.msg,
                            type:'success'
                        })
                        this.dialogFormVisible2 = false
                        this.getlist()
                    }
                })
            },
            unbindhander(type,val){
                if(val.sliceAreaId === null) {
                    return this.$message.warning('片区为空！')
                }
               this.$confirm(`确认解除${val.sliceAreaName}负责人${val.staffName}?`, '提示', {
                 confirmButtonText: '确定',
                 cancelButtonText: '取消',
                 type: 'warning'
               }).then(() => {
                 this.axios.post(api.DELETESLICEAREA,{id:val.id}).then(res=>{
                     if (res.data.code == 200) {
                            this.$message({
                                message:'解绑成功',
                                type:'success'
                            })
                            this.getlist()
                     }
                 })
               }).catch(() => {
                 this.$message({
                   type: 'info',
                   message: '已取消'
                 });          
               });
            },
            areahander(type,val){
                this.dialogFormVisible2 = true
                this.areatype = type
                this.currentArea = val
                this.form.area = ''
                this.form.region = ''

                if (type == 'edit') {
                    this.form.region = val.regionId
                    this.form.area =val.sliceAreaId
                    this.selectslicearea()
                }
            },
            //所有区域
            getAllAreaList(){
                this.axios.get(api.CITYREGIONALL).then(res=>{
                    if (res.data.code == 200) {
                        this.regionlist = res.data.data
                    }
                })
            },
            getlist() {
                this.axios.post(api.getAllStaffPageList, {
                    staffName: this.ruleForm.name,
                    stationId: this.ruleForm.post,
                    departmentId: this.ruleForm.depart,
                    pageSize: this.ruleForm.pageSize,
                    pageNum: this.ruleForm.pageNum,
                }).then((res) => {
                    this.tableData = res.data.data.list;
                    this.totalSize = res.data.data.total;
                })
            },
            handleCurrentChange() {
                this.getlist()
            },
            handleSizeChange(val) {
                this.ruleForm.pageSize = val
                this.getlist();
            },
            downExcelHandle() {
                this.$refs.downNode.click()
            },
            upLoadHandle() {
                this.$refs.upLoad.value = '' // 每次点击清空上次的值
                this.upTip = ''
                this.$refs.upLoad.click()
            },
            searchList() {
                this.ruleForm.pageNum = 1
                this.getlist()
            },
            //分佣设置 未绑定的楼盘
            setcommissin() {
                if (this.devname == '') {
                    this.$message({
                        message: '请添加楼盘',
                        type: 'warning'
                    });
                    return
                }
                this.$router.push({path:'/subcommissionSet',query:{id:this.devname,type:'staff'}})
            },
            //已经绑定楼盘设置分佣
            setonedev(val){
                this.$router.push({path:'/subcommissionSet',query:{id: val.id,type:'staff'}})
            },
            newbuilt() {
                this.$router.push({path: '/staffnewbuilt', query: {type: 'add'}})
            },
            editbuilt(type, row) {
                this.$router.push({path: '/staffnewbuilt', query: {type: 'edit', id: row.id}})
            },
            btnhander(row) {
                this.proSetting =row.projectSettingList
                this.dialogFormVisible = true;
                this.getalldev(row.id)
            },
            getalldev(val){
                this.axios.post(api.GETSETTINGBYSTAFFID,{id:val}).then((res) => {
                    if (res.data.code == 200) {
                        this.devlist = res.data.data.notBindList;
                    }
                })
            },
            fileChangeHandle() {
                const file = this.$refs.upLoad.files[0]
                if (file) {
                    let param = new FormData()
                    param.append('excelFile', file)
                    this.axios.post(api.STAFFUPLOAD, param).then((res)=>{
                          if (res && res.data.code == 200) {
                             this.$message({
                                  message: '导入成功',
                                  type: 'success'
                              });
                              this.getlist();
                          }  
                    })
                }
            },

            getAllPostList() {
                this.axios.post(api.getAllPostList, {}).then((res) => {
                    let postlist = []
                    res.data.data.forEach((item) => {
                        postlist.push({
                            id: item.stationId,
                            label: `${item.stationName}-${item.businessLineName}-${item.departmentName}`
                        })
                    })
                    this.postlist = postlist
                    this.postlist.unshift({"label":'全部',id:''})
                })
            },
            getAllDepartmentList(){
                this.axios.post(api.getAllDepartmentList, {}).then((res) => {
                    let departlist = []
                    res.data.data.forEach((item) => {
                        departlist.push({
                            id: item.id,
                            label: item.departmentName
                        })
                    })
                    this.departlist = departlist
                    this.departlist.unshift({"label":'全部',id:''})

                })
            },
            formatDate(data) {
                if(data){
                    return data.split(" ")[0]
                }
            }
        },
        activated(){
            this.searchList()
        },
        created() {
            this.getlist();
            this.getAllDepartmentList();
            this.getAllPostList();
            this.getAllAreaList();
        }
    }
</script>

<style lang="stylus">
    // .el-dialog__header
    //    padding:0
       
    .nopad
        padding: 5px
    .pstyle
        margin: 0;
        padding: 0;
        color:blue;
</style>